<template>
	<view class="">
		<view class="cu-modal show" @tap="cancel">
			<view class="cu-dialog" style="background-color: transparent;" @tap.stop="">
				<view class="cu-progress radius striped active ">
					<view class="bg-cyan" :style="[{ width:progress+'%'}]">
						{{progress}}%
					</view>
				</view>
				<view class="text-white text-sm margin-top" @click="cancel">
					取消上传
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ShowUpload",
		data() {
			return {
			
			}
		},
		props:{
			progress:{
				type:Number,
				default:0
			}
		},
		watch:{
			progress(val){
				this.progress=val;
			}
		},
		methods:{
			cancel(){
				uni.showModal({
					content:"确认取消上传任务吗？",
					success: (r) => {
						if(r.confirm){
							this.$parent.closeUpload("cancel");
						}
					}
				})
			}
		
			
		}

	}
</script>

<style lang="scss">
	.cu-progress view {
		width: 0;
		height: 100%;
		align-items: center;
		display: flex;
		justify-items: flex-end;
		justify-content: space-around;
		font-size: 20upx;
		color: #ffffff;
		transition: width 0.6s ease;
	}

	.cu-progress {
		overflow: hidden;
		height: 28upx;
		background-color: rgba(114, 103, 108, 0.3);
		display: inline-flex;
		align-items: center;
		width: 100%;
	}

	.cu-progress+view,
	.cu-progress+text {
		line-height: 1;
	}

	.cu-progress text {
		align-items: center;
		display: flex;
		font-size: 20upx;
		color: #333333;
		text-indent: 10upx;
	}

	.cu-progress.striped view {
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
		background-size: 72upx 72upx;
	}

	.cu-progress.active view {
		animation: progress-stripes 2s linear infinite;
	}

	@keyframes progress-stripes {
		from {
			background-position: 72upx 0;
		}

		to {
			background-position: 0 0;
		}
	}
</style>
